<template>
  <a-drawer
    :title="title + $t('message.Role')"
    :width="600"
    :maskClosable="true"
    placement="right"
    :closable="true"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div style="margin: 0 16px">
        <a-form-model
          ref="form"
          :model="model"
          :rules="validatorRules"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          labelAlign="left"
        >
          <a-form-model-item
            :label="$t('message.The_name_of_the_role')"
            required
            prop="roleName"
          >
            <a-input
              v-model="model.roleName"
              :placeholder="$t('message.Please_enter')"
            />
          </a-form-model-item>
          <a-form-model-item
            :label="$t('message.Description')"
            prop="description"
          >
            <a-textarea
              :rows="5"
              v-model="model.description"
              :placeholder="$t('message.Please_enter')"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-spin>
    <div class="drawerOptionBox">
      <a-button @click="handleCancel">{{ $t("message.Cancel") }}</a-button>
      <a-button type="primary" style="margin-left: 8px" @click="handleOk">
        {{ $t("message.Confirm") }}</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import { addRole, editRole, duplicateCheck } from "@/api/api";
import { postAction } from "../../../../api/manage";

export default {
  name: "RoleModal",
  data() {
    return {
      title: "",
      visible: false,
      model: {},
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      confirmLoading: false,
      validatorRules: {
        roleName: [
          {
            required: true,
            message: this.$t("message.Please_enter_the_character_name"),
          },
          {
            min: 2,
            max: 30,
            message: this.$t("message.The_length_is_between_2_and_30_characters"),
            trigger: "blur",
          },
        ],
        description: [
          {
            min: 0,
            max: 126,
            message: this.$t("message.The_length_does_not_exceed_126_characters"),
            trigger: "blur",
          },
        ],
      },
      url: {
        save: "/orgRole/save",
      },
    };
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      console.log(record);
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    close() {
      this.$refs.form.clearValidate();
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let obj;
          postAction(this.url.save, this.model)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
                that.close();
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
    validateRoleCode(rule, value, callback) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback(this.$t("message.Character_encoding_cannot_input_Chinese_characters"));
      } else {
        let params = {
          tableName: "sys_role",
          fieldName: "role_code",
          fieldVal: value,
          dataId: this.model.id,
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback();
          } else {
            callback(res.message);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.drawerOptionBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 12;
}
</style>